<template>
  <view class="store">
			<view class="store-title">
					您的服务门店
			</view>

			<view class="store-info" v-if="store">
				<view class="store-info-scope" @click="goMyStore">
						<image class="store-info-img" mode="aspectFit" :src="store.storeImageUrl || 'https://pics.leshiguang.com/vpage/2024/01/22/9d60febfbbcd4cbc9c91a15cc6e3fb9a.png'"></image>
						<view class="store-info-content">
							<view class="store-info-title">{{ store.storeName }}</view>
              <view class="store-info-tags">
                <view class="store-info-tags-tag" v-for="(item, i) in tags" :key="i">{{ item }}</view>
              </view>
						</view>
            <image style="width: 16px; height: 16px;" src="https://pics.leshiguang.com/vpage/2024/01/02/6fd21b894b2d489b9b7fafd55a5a59ef.png">
            </image>
				</view>
				<view class="store-note" v-if="noticeList.length" >
          <image class="note-image" src="https://pics.leshiguang.com/vpage/2024/05/17/fe4b10872aa545d29d2825c6d0613751.png"></image>
          <swiper class="note-swiper" :indicator-dots="false" :circular="true" 
            :autoplay="true" :interval="3000" :duration="1000" @change="onSwiperChange">
              <swiper-item v-for="(item, i) in noticeList" :key="i" class="note-item" @click="handleTip(item)">
                <view class="store-note-desc">{{ item.noticeTitle }}</view>
              </swiper-item>
          </swiper>
          <view class="dot-scope">
            <view class="dot" v-for="(item, i) in noticeList" :class="i == index ? 'active' : 'unactive'" :key="i"></view>
          </view>
        </view>
			</view>

      <view v-else class="nostore">
        <image class="image" src="https://pics.leshiguang.com/vpage/2024/01/21/c9623d1090dc4c268e4950e89de7a423.png"></image>
        <view class="desc">暂无服务门店</view> 
        <view class="button" @click="onStore">去看看</view>

      </view>

      <u-popup v-model="showNote" mode="bottom" border-radius="20" :mask="true" z-index="10000000">
				<view class="popup">
          <view class="title">{{ selectItem.noticeTitle }}</view>
          <scroll-view class="content" scroll-y="true">
            <view >{{ selectItem.noticeDesc }}</view>
          </scroll-view>
          
					<view class="button"
						@click="showNote = false">我知道了</view>
				</view>
			</u-popup>
		</view>
</template>

<script>

import uPopup from "uview-ui/components/u-popup/u-popup.vue";
import uSwiper from "uview-ui/components/u-swiper/u-swiper.vue";
export default {
  components: {uPopup, uSwiper},
  props: {
    store: {
      type: Object,
    },
    noticeList: {
      type: Array,
    }
  },
  data() {
    return {
      // store: {
      //   title: '上海百岁园总店',
      //   tags: [
      //     "九年老店",
      //     "2021年最佳门店"
      //   ],
      // },
      
      showNote: false,

      selectItem: {},

      index: 0,
    };
  },
  watch: {
    noticeList(n) {
      if (n.length < 2) {
        this.index = 0;
      } 
    }
  },
  computed: {
    tags() {
      if (this.store) {
        const d = new Date(this.store.createTime);
        const n = new Date();
        const ret = this.monthDayDiff(d, n);
        if (ret[0] >= 3 ) {
          return [`${ret[0]}年老店`]
        } else if (ret[0] >= 1 ) {
          return  [`开店${ret[0]}年`]
        } else {
          return [`开店${ret[1]}个月`]
        }
      }
      return []
    }
  },
  methods: {
    onSwiperChange(e) {
      this.index = e.detail.current
    },
    handleTip(item) {
      this.selectItem = item
      this.showNote = true;
    },
    onStore() {
      // TODO: 跳转顾问查找页
      uni.navigateTo({
        url: '/pagesMy/my/counselor/counselor'
      })
    },
    goMyStore() {
      this.$urouter.navigateTo({
        url: '/pagesStore/myStore',
        params: {
        }
      });
    },
    monthDayDiff(startTime,endTime) {
      let flag = [1, 3, 5, 7, 8, 10, 12, 4, 6, 9, 11, 2];
      let start = new Date(startTime);
      let end = new Date(endTime);
      let year = end.getFullYear() - start.getFullYear();
      let month = end.getMonth() - start.getMonth();
      let day = end.getDate() - start.getDate();
      if (month < 0) {
        year--;
        month = end.getMonth() + (12 - start.getMonth());
      }
      if (day < 0) {
        month--;
        let index = flag.findIndex((temp) => {
          return temp === start.getMonth() + 1
        });
        let monthLength;
        if (index <= 6) {
          monthLength = 31;
        } else if (index > 6 && index <= 10) {
          monthLength = 30;
        } else {
          monthLength = 28;
        }
        day = end.getDate() + (monthLength - start.getDate());
      }

      return [year, month];
    }
  },
};
</script>
<style lang="scss" scoped>

.store {
		margin: 0 12px 12px 12px;
    background-color: #057691;
    border-radius: 12px 12px 18px 18px;
    .store-title {
      padding: 12px 16px;
      font-size: 20px;
      color: white;
      font-weight: bold;
    }

    .nostore {
      background: white;
      padding: 40px 24px 24px 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .image {
        width: 122px;
        height: 70px;
        margin-bottom: 12px;
        
      }
      .desc {
        font-size: 14;
        color: rgba(34, 34, 34, 0.5);
        margin-bottom: 20px;
      }
      .button {
        width: 160px;
        text-align: center;
        padding: 11px;
        border-radius: 22px;
        color: white;
        background: #057691;
      }
    }

    .store-info {
      background-color: white;
      border-radius: 12px;
      border: 2px solid white;
      .store-info-scope {
        display: flex;
        padding: 16px;
        align-items: center;
        .store-info-img {
          width: 64px;
          height: 64px;
          border-radius: 4px;
          margin-right: 12px;
        }
        .store-info-content {
          flex: 1;
          display: block;
          .store-info-title {
            font-size: 16px;
            color: #222;
            font-weight: bold;
            margin-bottom: 6px;
          }

          .store-info-tags {
            display: flex;
            flex-wrap: wrap;
            .store-info-tags-tag {
              margin-right: 8px;
              padding: 1px 4px;
              font-size: 11px;
              border-radius: 4px;
              color: #057691;
              border: 1px solid rgba(5, 118, 145, 0.40);
            }
          }

        }
      }

      .store-note {
        display: flex;
        position: relative;
        align-items: center;
        border-radius: 0 0 8px 8px;
        background: #FFF3D3;
        padding-right: 16px;
        .note-image {
          height: 46px;
          width: 38px;
        }

        .note-swiper {
          flex: 1;
          height: 20px;

          .note-item {
            display: flex;
            align-items: center;
          }
        }

        .dot-scope {
          position: absolute;
          right: 16px;
          bottom: 8px;
          display: flex;
          z-index: 1;
          margin-top: 5px;
          gap: 3px;
          .dot {
            height: 3px;
            width: 6px;
            border-radius: 2px;
            background: #FF6300;
            transition: 0.3s;
            &.active {
              opacity: 1;
              width: 12px; 
            }
            &.unactive {
              opacity: 0.3; 
              width: 6px;
            }
          }
        }

        .store-note-desc {
          color: #FF6300;
          font-size: 13px;
          font-weight: bold;
        }
      }
    }
	}

.popup {
  background-color: white;
  padding: 0 20px 0px 20px;
  .title {
    padding: 17px;
    font-size: 16px;
    color: #222;
    font-weight: bold;
    text-align: center;
  }

  .content {
    height: 480px;
    line-height: 28px;
    font-size: 14px;
    color: #222;
    overflow-y: auto;
  }

  .button {
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    border-radius: 25px;
    background-color: #057691;
    color: white;
    margin: 8px 0;
  }
}

</style>
